<template>
  <div class="report-pages-wrapper">
    <div class="header-bar">
      <div class="header-title">
        <div class="back-btn"  @click="handleBack">
          <img src="@/assets/icon-common-back.png" class="back-icon" />
          <span class="text">返回</span>
        </div>
        <div class="title-line"></div>
        <div class="title-text">{{ title }}</div>
      </div>
      <div class="header-btns">
        <div class="btns" @click="handleDown">
          <img src="@/assets/icon-report-down.png" class="icons" />

          <span class="text">下载报告</span>
        </div>
      </div>
    </div>
    <div class="report-wrapper-2">
      <div class="report-sider">
        <div class="report-title">
          <div class="title-text">报告基础信息</div>
        </div>
        <div class="sider-form">
          <a-descriptions
            bordered
            :label-style="{
              width: '120px',
              height: '40px',
              background: '#F2F3F5',
              padding: '0',
              textAlign: 'center',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '500',
              fontSize: '14px',
              color: '#262626',
            }"
            :content-style="{
              textAlign: 'left',
              width: '148px',
              height: '40px',
              boxSizing: 'border-box',
              padding: '0 0 0 20px',
              background: '#FFFFFF',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '400',
              fontSize: '14px',
              color: '#262626',
            }"
            :column="1"
          >
            <a-descriptions-item label="实验名称">{{
              formData.experiment_name
            }}</a-descriptions-item>
            <a-descriptions-item label="学院">{{
              formData.college
            }}</a-descriptions-item>
            <a-descriptions-item label="班级">{{
              formData.class_name
            }}</a-descriptions-item>
            <a-descriptions-item label="姓名">{{
              formData.student_name
            }}</a-descriptions-item>
            <a-descriptions-item label="实验日期">{{
             dateFormat(formData.date)
            }}</a-descriptions-item>
            <a-descriptions-item label="专业">{{
              formData.major
            }}</a-descriptions-item>
            <a-descriptions-item label="组号">{{
              formData.group_no
            }}</a-descriptions-item>
            <a-descriptions-item label="学号">{{
              formData.student_no
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="report-main-2">
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验目的</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.objective"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验仪器和器材</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.instrument_equipment"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验原理</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.principle"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验步骤</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.steps"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">数据记录</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.data_records"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验结果</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.result"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">误差分析</div>
          </div>
          <div class="report-content">
            <div v-html="reprotData.error_analysis"></div>
          </div>
        </div>
       <!-- <div class="report-column">
          <div class="report-title">
            <div class="title-text">思考题</div>
          </div>
          <div class="report-content">
            <div
              class="report-col"
              v-for="(item, index) in reprotData.report_think_list"
              :key="index"
            >
              <div class="col-title">{{ item.think_title }}</div>
              <div v-html="item.think_content"></div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <report-down v-model:value="isOpen" :id="key"></report-down>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import API from "@/api/user";
import { useRouter } from "vue-router";
import { dateFormat } from "@/utils/date";
import reportDown from "@/components/report-down/index.vue";
const router = useRouter();
const query = computed(() => router.currentRoute.value.query);
const formData = ref({
  experiment_name: "",
  date: "",
  college: "", //学院名称
  major: "", //专业
  class_name: "", //班级
  group_no: "",
  student_name: "",
  student_no: "",
});
const reprotData = ref({
  objective: "", //实验目的
  instrument_equipment: "", //实验仪器和器材
  principle: "", //实验原理
  steps: "", //实验步骤
  data_records: "", //数据记录
  result: "", //实验结果
  error_analysis: "", //误差分析
});
const title = ref("在线填报");
const key = ref()
const getData = async () => {
  let params = {
    report_id: query.value.id,
  };
  const res = await API.ReportFetchModel(params);
  if (res != null) {
    formData.value = res;
    formData.value.date = res.updated;
    reprotData.value = res;
    key.value = res.student_experiment_id
    console.log(res);
  }
};
const handleBack = () => {
  router.go(-1);

}
const isOpen = ref(false);
const handleDown = () => {
  isOpen.value = true;
};
onMounted(() => {
  getData();
});
</script>
<style lang="less" scoped>
.report-pages-wrapper {
  width: 100%;
  height: 100%;
  background: #f2f3f5;
}
.header-bar {
  display: flex;
  background: #fff;
  padding: 0 16px;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .back-btn{
      display: flex;
      align-items: center;
      cursor: pointer;
      .back-icon{
        width: 16px;
        height:16px;
      }
       .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
       }
    }
    .title-logo {
      display: flex;
      align-items: center;
      .login-text {
        font-family: FZZYJW--GB1-0;
        font-weight: 0;
        font-size: 14px;
        color: #262626;
      }
    }
    .title-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 12px;
    }
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
        &.blue {
          font-family: DS-Digital;
          font-size: 16px;
          color: #2776ff;
        }
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
      &.red {
        background: #ff4d4f;
      }
    }
  }
}
.report-wrapper-2 {
  height: calc(100% - 51px);
  overflow-y: auto;
  padding: 30px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.report-title {
  padding-left: 10px;
  border-left: 4px solid #2776ff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  .title-text {
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    font-size: 16px;
    color: #262626;
    line-height: 16px;
  }
  .title-desc {
    color: #bfbfbf;
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    line-height: 16px;
  }
}
.report-sider {
  width: 300px;
  position: absolute;
  top: 30px;
  left: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 16px;
}
.report-main-2 {
  width: 820px;
  background: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 30px;
  .report-content {
    padding-bottom: 36px;
     .report-col {
      padding-bottom: 18px;
      .col-title {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 16px;
        color: #262626;
        line-height: 16px;
        margin-bottom: 12px;
      }
    }
  }
}
</style>
